<div class="user-bar">
    <div class="panel-item hidden-sm-and-down" @click="search">
        <el-icon>
            <search />
        </el-icon>
    </div>
    <div class="screen panel-item hidden-sm-and-down" @click="screen">
        <el-icon><full-screen /></el-icon>
    </div>
    <div class="tasks panel-item" @click="tasks">
        <el-icon><sort /></el-icon>
    </div>
    <div class="msg panel-item" @click="showMsg">
        <el-badge class="badge" type="danger">
            <el-icon><chat-dot-round /></el-icon>
        </el-badge>
    </div>
    <el-dropdown class="user panel-item" trigger="click" @command="handleUser">
        <div class="user-avatar">
            <el-avatar :size="30"><img src="{:htmlentities(session('user.headimg'))}"></el-avatar>
            <label>{:htmlentities(session('user.nickname')?:session('user.username'))}</label>
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="uc">帐号信息</el-dropdown-item>
                <el-dropdown-item command="clearCache">清除缓存</el-dropdown-item>
                <el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</div>
<el-dialog v-model="searchVisible" :width="700" title="{:lang('user.search')}" custom-class="drawerBG" center destroy-on-close>
    <!-- 顶部菜单 开始 -->
    {include file="index/index-userbar-search"}
    <!-- 顶部菜单 结束 -->
</el-dialog>
<el-drawer v-model="tasksVisible" :size="450" title="{:lang('user.tasks')}" custom-class="drawerBG" destroy-on-close>
</el-drawer>